<template>
    <div>
    <div class='search'>
        <input class = 'search-input' type="text" placeholder="输入城市名或拼音" v-model="keyword"/>
    </div>
    <div class="search-content" ref='search' v-show="keyword">
        <ul>
            <li class= 'search-itme border-bottom' v-for= 'item of list' :key= 'item.id'
             @click= 'handleCityClick(item.name)'
            >{{item.name}}</li>
            <li class = "search-itme border-bottom " v-show='hasNoData'>没有找到匹配数据</li>
        </ul>
    </div>
    </div>
</template>
<script>
import Bscroll from 'better-scroll'
import {mapMutations} from 'vuex'
export default {
    name:'CitySearch',
    props:{
        cities:Object
    },
    data (){
        return {
            keyword:'',
            list:[],
            timer:null
        }
    },
    methods: {
        handleCityClick(city){
            // this.$store.commit('changeCity',city)
            this.changeCity(city)
            this.$router.push('/')
        },
        ...mapMutations(['changeCity'])
    },
    computed: {
        hasNoData (){
            return !this.list.length
        }
    },
    watch: {
        keyword (){
            if(this.timer) {
                clearTimeout(this.timer)
            }
            if(!this.keyword){
                this.list = []
                return
            }
            this.timer = setTimeout(()=>{
                const result = []
                for (let i in this.cities) {
                    this.cities[i].forEach((value) =>{
                        if(value.spell.indexOf(this.keyword) > -1||
                        value.name.indexOf(this.keyword) > -1){
                            result.push(value)
                        }
                    })
                }
                this.list = result
            },100)
        }
    },
    mounted () {
        this.scroll = new Bscroll(this.$refs.search)
    }
}
</script>

<style lang = 'stylus' scoped>
 @import '~style/varibles.styl';
 .search
  height :.62rem
  background :$bgcolor
  padding :0.1rem
  .search-input
   box-sizing :border-box
   width :100%
   height :.62rem
   padding :0.1rem
   line-height :.62rem
   text-align :center
   border-radius :.06rem
   color :#666
.search-content
 z-index :1
 width :100%
 overflow: hidden
 position:absolute
 top:1.68rem
 lelt:0
 right:0
 bottom:0
 .search-itme
  line-height :.62rem
  padding-left :.2rem
  color :#666
  background :#fff
</style>